<template>
  <div class="area-selection-box">
    <div class="selection-title">
      <span>区域计算方案选择</span>
    </div>
    <div class="selection-content">
      <div class="table-box">
        <div class="table-title">
          <span>比对比选的区域方案</span>
          <!-- <span>+添加区域方案</span> -->
          <el-button type="primary">+添加区域方案</el-button>
        </div>
        <el-table border :data="state.tableData" size="small" @current-change="handleChangescheme"
          show-overflow-tooltip>
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column width="40">
            <template #default="scope">
              <el-radio v-model="state.schemeRadio" :label="scope.row"><i /></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="schemeName" label="比选方案名称" show-overflow-tooltip />
          <el-table-column prop="schemeDesc" label="说明" show-overflow-tooltip />
          <el-table-column label="操作" width="150">
            <template #default>
              <!-- <el-button link type="primary" size="small" @click="handleClick">修改</el-button> -->
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="tabs-box">
        <div class="tabs-title">
          <span>区域计算方案设置区-</span>
          <span>{{state.schemeArr[0]?.schemeName}}</span>
        </div>
        <div class="unit-title-box">
          <!-- <div class="unit-title">已选方案</div> -->
          <div class="scheme-box">
            <div class="scheme-item">
              <div class="item-title">方案名称:</div>
              <!-- <div class="item-value">{{'盘龙区域1'}}</div> -->
              <el-input type="primary" v-model="state.form.schemeName"></el-input>

            </div>
            <div class="scheme-item">
              <div class="item-title">说明:</div>
              <!-- <div class="item-value">{{'新安江+1维'}}</div> -->
              <el-input type="primary" v-model="state.form.schemeDesc"></el-input>
            </div>
          </div>
        </div>
        <div class="unit-body">
          <el-tabs type="border-card">
            <el-tab-pane label="洪水预报方案">
              <!-- 洪水预报方案 -->
              <div class="unit-container">
                <div class="unit-edit-box">
                  <!-- <div class="unit-row">
                    <span class="unit-row-font">洪水预报方案：</span>
                    <span class="unit-row-font1">{{ efflux.areaName }}</span>
                  </div> -->
                  <div class="unit-row">
                    <span class="unit-row-font">模型名称：</span>
                    <span class="unit-row-font1">
                      <el-radio-group v-model="modelRadio" class="ml-4" @change="handleModelRadio">
                        <el-radio label="1">时空变源</el-radio>
                        <el-radio label="2">新安江</el-radio>
                        <el-radio label="3">API</el-radio>
                      </el-radio-group>

                    </span>
                  </div>
                  <div class="unit-row">
                    <span class="unit-row-font">模型参数：</span>
                    <span class="unit-row-font2">
                      <el-select v-model="state.modelParam" placeholder="请选择" @change="handleChangeModel">
                        <el-option :key="index" v-for="(item,index) in state.modelParams" :value="item.schemeCode"
                          :label="item.schemeName"></el-option>
                      </el-select>
                    </span>
                    <span class="unit-search">查看参数详情</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="河道演进方案">
              <!-- 河段 -->
              <div class="unit-container">
                <div class="unit-edit-box">
                  <div class="unit-row">
                    <span class="unit-row-font">河段名称：</span>
                    <span class="unit-row-font1">{{ '杨家横盘龙河段' }}</span>
                  </div>
                  <div class="unit-row">
                    <span class="unit-row-font">模型名称：</span>
                    <span class="unit-row-font1">
                      <el-radio-group v-model="riverRadio" class="ml-4" @change="handleRiverRadio">
                        <el-radio label="1">马斯京根</el-radio>
                        <el-radio label="2">一维水动力</el-radio>
                        <el-radio label="3">二维水动力</el-radio>

                      </el-radio-group>
                    </span>
                  </div>
                  <div class="unit-row">
                    <span class="unit-row-font">模型参数：</span>
                    <span class="unit-row-font2">
                      <el-select v-model="state.riverParam" placeholder="请选择" @change="handleChangeRiver">
                        <el-option :label="'马斯京根参数'" :value="'0'"></el-option>
                      </el-select>
                    </span>
                    <span class="unit-search">查看参数详情</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="水工程">
              <!-- 水工程 -->
              <div class="unit-container">
                <div class="unit-edit-box">
                  <div class="unit-row">
                    <span class="unit-row-font">工程名称：</span>
                    <span class="unit-row-font1">{{ 'A闸门' }}</span>
                    <span class="unit-row-font unit-left-mge">工程类型：</span>
                    <span class="unit-row-font1">{{ '水库' }}</span>
                  </div>
                  <div class="unit-row">
                    <span class="unit-row-font">模型名称：</span>
                    <span class="unit-row-font1">
                      <el-radio-group v-model="waterRadio" class="ml-4" @change="handleWaterRadio">
                        <el-radio label="3">规程调度</el-radio>
                        <el-radio label="4">优化调度</el-radio>
                      </el-radio-group>
                    </span>
                  </div>
                  <div class="unit-row">
                    <span class="unit-row-font">模型参数：</span>
                    <span class="unit-row-font2">
                      <el-select v-model="state.waterParam" placeholder="请选择" @change="handleChangeWata">
                        <el-option :key="index" v-for="(item,index) in state.waterParams" :value="item.schemeCode"
                          :label="item.schemeName"></el-option>
                      </el-select>
                    </span>
                    <span class="unit-search">查看参数详情</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted, nextTick } from 'vue'
import { schemes } from '@/assets/data/com_data/40501009_info.json'
import { getUnitSchemeInfos, getReservoirScheme } from '@/services/modules/compute-methods'
const emit = defineEmits(['getSchemeInfo'])
// const efflux = reactive(schemes.floodForecast)
const props = defineProps({
  schemeData: {
    type: Array,
    default: () => []
  },
  blkcd: {
    type: String,
    default: ''
  }
})
watch(
  () => props.schemeData,
  () => {
    state.tableData = props.schemeData
    state.schemeArr = props.schemeData
    state.schemeInfo.blkcd = state.schemeArr[0].blkcd
    state.schemeInfo.blknm = state.schemeArr[0].blknm
    handleChangescheme(state.tableData[0])
    handleModelRadio(1)
    handleRiverRadio(0)
    handleWaterRadio(3)
    getSchemeInfo(state.schemeInfo)
  }
)
// onMounted(() => {
//   nextTick(() => {})
// })
const state = reactive({
  form: {},
  schemeArr: [],
  schemeRadio: '',
  tableData: [],
  //洪水预报
  modelParams: {},
  modelParam: '',
  //河道演进
  riverParam: '',
  //水工程
  waterParam: '',
  waterParams: {},
  //schemeInfo
  schemeInfo: {}
})
const riverRadio = ref('1')
const modelRadio = ref('1')
const waterRadio = ref('3')
const waterParam = ref('')
const riverParam = ref('')
const form = reactive({
  schemeName: '盘龙区域1',
  schemeDesc: '新安江+2维'
})
const current = ref(0)
const arrBtn = reactive(['洪水预报方案', '河道演进方案', '水工程'])
const searchBtn = (index) => {
  current.value = index
}
function handleChangeModel(item) {
  state.schemeInfo.wataSeCode = item
}
function handleChangeRiver(item) {
  state.schemeInfo.riverSeCode = item
}
function handleChangeWata(item) {
  state.schemeInfo.enggSeCode = item
}
function handleChangescheme(item) {
  if (item) {
    state.schemeRadio = item
    state.form = item
    state.schemeInfo.schemeName = state.form.schemeName
    state.schemeInfo.schemeDesc = state.form.schemeDesc
  }
}
function handleModelRadio(item) {
  state.schemeInfo.wataMId = item
  getUnitSchemeInfos({ blkcd: props.blkcd, modelId: item }).then((res) => {
    if (res.code === 200) {
      state.modelParams = res.data
      state.modelParam = state.modelParams[0].schemeCode
      state.schemeInfo.wataSeCode = state.modelParam
    }
  })
}
function getSchemeInfo(item) {
  emit('getSchemeInfo', item)
}
function handleRiverRadio(item) {
  state.schemeInfo.riverMid = item
  state.riverParam = '0'
  state.schemeInfo.riverSeCode = ''
}
function handleWaterRadio(item) {
  state.schemeInfo.enggMid = item
  getReservoirScheme({ blkcd: props.blkcd, modelId: item }).then((res) => {
    if (res.code === 200) {
      state.waterParams = res.data
      state.waterParam = state.waterParams[0]?.schemeCode
      state.schemeInfo.enggSeCode = state.waterParam
    }
  })
}
</script>
<style lang="less" scoped>
.area-selection-box {
  width: 100%;
  height: 100%;
  .selection-title {
    height: 30px;
    margin-left: 20px;
    span {
      color: #5583e6;
      font-size: 16px;
    }
  }
  .selection-content {
    height: 500px;
    .table-box {
      width: 100%;
      height: 150px;
      // margin-left: 5%;
      .table-title {
        display: flex;
        height: 35px;
        align-items: center;
        justify-content: space-between;
        margin-left: 30px;
        margin-bottom: 5px;
        span:nth-of-type(1) {
          color: black;
          font-size: 14px;
        }
        span:nth-of-type(2) {
          width: 120px;
          height: 25px;
          background: #5583e6;
          border-radius: 10px;
          // display: inline-block;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
        }
      }
      :deep(.el-table) {
        width: 100%;
        height: calc(100% - 40px);
      }
    }
    .tabs-box {
      height: 300px;
      .tabs-title {
        margin: 20px 0 0 20px;
        span:nth-of-type(1) {
          color: black;
          font-size: 16px;
        }
        span:nth-of-type(2) {
          color: #5583e6;
          font-size: 16px;
        }
      }
      .unit-title-box {
        height: 40px;
        padding-left: 50px;
        padding-top: 10px;
        .unit-title {
          color: #000;
        }
        .scheme-box {
          display: flex;
          margin-top: 10px;
          margin-left: 20px;
          .scheme-item {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 30px;
            .item-title {
              width: 100px;
              color: #868686dc;
            }
            .item-value {
              margin-left: 30px;
              font-weight: 600;
              font-size: 14px;
            }
          }
        }
      }
      .unit-body {
        margin-top: 15px;
        width: 100%;
        height: calc(100% - 40px);
        box-sizing: border-box;
        :deep(.el-tabs) {
          height: 100%;
          .el-tabs__content {
            height: calc(100% - 55px);
            .el-tab-pane {
              height: 100%;
            }
          }
        }
        .unit-btn-box {
          .unit-btn-item {
            cursor: pointer;
            display: inline-block;
            height: 30px;
            padding: 0 20px;
            margin-left: 20px;
            line-height: 30px;
            font-size: 13px;
            font-weight: 600;
          }
          .active {
            border-bottom: solid 1px rgba(24, 24, 234, 0.915);
            color: rgba(24, 24, 234, 0.915);
          }
        }
        .unit-container {
          height: 100%;
          // overflow-y: auto;
          // height: 300px;
          // padding: 20px 0 10px 0;
          // box-sizing: border-box;
          .unit-edit-box {
            .unit-row {
              margin-top: 10px;
              height: 30px;
              .unit-row-font {
                color: #868686dc;
                font-size: 12px;
                letter-spacing: 3px;
                display: inline-block;
              }
              .unit-left-mge {
                margin-left: 150px;
              }
              .unit-row-font1 {
                font-size: 12px;
                font-weight: 600;
              }
              .unit-row-font2 {
                font-size: 13px;
                font-weight: 400;
              }
              .unit-search {
                margin-left: 100px;
                font-size: 13px;
                color: blue;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>
